{% extends 'base.html' %}
{% block title %}登录{% endblock %}
{% block style %}
  <style type="text/css">
    body > .grid {
      height: 100%;
    }
    .image {
      margin-top: -100px;
    }
    .column {
      max-width: 450px;
    }
  </style>
{% endblock %}
{% block content %}
<div class="ui text middle aligned center aligned grid container segment">
  <div class="column">
    <h2 class="ui teal image header">
      <img src="{{ url_for('static', filename='img/logo.jpg') }}" class="image">
      <div class="content">
        登录到 web聊天室
      </div>
    </h2>
    <form class="ui large form login" action="{{ url_for('login') }}" method="post">
      <div class="ui stacked segment">
        <div class="field">
          <div class="ui left icon input">
            <i class="user icon"></i>
            {{ form.username }}
          </div>
        </div>
        <div class="field">
          <div class="ui left icon input">
            <i class="lock icon"></i>
            {{ form.password }}
          </div>
        </div>
<!--        <div class="ui fluid large teal submit button">登录</div>-->
        {{ form.submit }}
      </div>

      <div class="ui error message"></div>

    </form>

    <div class="ui message">
      新用户？ <a href="{{ url_for('register')}}">注册</a>
    </div>
  </div>
</div>
{% endblock %}